import styled from 'styled-components'



export const IntroSongsWrap = styled.div`
  
  margin:50px 106px 0 106px;
  .intro-title {
    font-weight:bold;
    margin-left:10px;
  }
  .songs-list {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
    margin-top:10px;
    .songs-item {
      width:185px;
      height:240px;
      cursor: pointer;
      position:relative;
      overflow:hidden;
      img {
        width:185px;
        height:185px;
        border-radius:5px;
      }
      .songs-title {
        margin-top:5px;
        padding:0 3px;
      }
      .playlist-count {
        position:absolute;
        width:100%;
        height:23px;
        color: #f6f6f6;
        font-size: 0.92857rem;
        padding: 0.21429rem 0;
        text-align: right;
        background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
        top:0;
        right:0;
        line-height:19px;
        transition:all .4s ease-in-out;
        img {
          width:15px;
          height:15px;
          margin-right:5px;
        }
      }

      .playlist-desc {
        position:absolute;
        width:100%;
        color: #f6f6f6;
        font-size: 0.92857rem;
        padding: 0.21429rem 0;
        text-align: right;
        background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
        top:-50px;
        left:0;
        line-height:19px;
        transition:all .4s ease-in-out;
      }
      .playlist-play {
        position: absolute;
        bottom:65px;
        left:12px;
        opacity:0;
        transition:all .3s ease-in;
        img {
          width:30px;
          height:30px;
        } 
      }

      &:hover {
        .playlist-count {
          top:-50px;
        }
        .playlist-desc {
          top:0;
        }
        .playlist-play {
          opacity:0.8;
        }
      }
    }
  }
`
